<template>
	<div ref="chart" style="width: 500px; height: 288px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	name: 'line',
	props: {
		rightType: {
			type: Number,
			default: function (e) {
				return 0;
			},
		},
	},
	watch: {
		rightType: {
			deep: true, // 深度监听，确保对象内部的数据变化也能触发
			handler(newVal) {
				this.commandstats.dispose();
				this.initChart();
			},
		},
	},
	created() {},
	mounted() {
		this.initChart();
	},
	data() {
		return {
			// 统计命令信息
			commandstats: null,
		};
	},
	methods: {
		initChart() {
			var trafficWay = [
				{
					name: '一个月内',
					value: Math.floor(Math.random() * 524414) + 1,
				},
				{
					name: '三个月内',
					value: Math.floor(Math.random() * 1055400) + 1,
				},
				{
					name: '六个月内',
					value: Math.floor(Math.random() * 1011200) + 1,
				},
				{
					name: '一年以内',
					value: Math.floor(Math.random() * 221447) + 1,
				},
				{
					name: '一年以上',
					value: Math.floor(Math.random() * 1001220) + 1,
				},
			];
			var data = [];
			var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
			for (var i = 0; i < trafficWay.length; i++) {
				data.push(
					{
						value: trafficWay[i].value,
						name: trafficWay[i].name,
						itemStyle: {
							normal: {
								borderWidth: 10,
								shadowBlur: 20,
								borderColor: color[i],
								shadowColor: color[i],
							},
						},
					},
					{
						value: 2,
						name: '',
						itemStyle: {
							normal: {
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
								color: 'rgba(0, 0, 0, 0)',
								borderColor: 'rgba(0, 0, 0, 0)',
								borderWidth: 0,
							},
						},
					}
				);
			}
			const seriesOption = [
				{
					name: '',
					type: 'pie',
					clockWise: false,
					radius: [80, 80],
					hoverAnimation: false,
					itemStyle: {
						normal: {
							label: {
								fontSize: 12,
								show: true,
								position: 'outside',
								color: '#ddd',
								formatter: function (params) {
									var percent = 0;
									var total = 0;
									for (var i = 0; i < trafficWay.length; i++) {
										total += trafficWay[i].value;
									}

									percent = params.value;
									if (params.name !== '') {
										return params.name + '' + '' + percent;
									} else {
										return '';
									}
								},
							},
							labelLine: {
								length: 10,
								length2: 10,
								show: true,
								color: '#00ffff',
							},
						},
					},
					data: data,
				},
			];
			const option = {
				// backgroundColor: '#0A2E5D',
				color: color,
				title: {
					text: '历史客流',
					top: '47%',
					textAlign: 'center',
					left: '49%',
					textStyle: {
						color: '#fff',
						fontSize: 15,
						fontWeight: '400',
					},
				},
				graphic: {
					elements: [
						{
							type: 'image',
							z: 2,
							style: {
								// image: img,
								width: 180,
								height: 90,
							},
							left: 'center',
							top: 'center',
							position: [100, 100],
						},
					],
				},
				grid: {
					left: '0%',
					top: '0%',
					bottom: '0%',
					right: '0%',
				},
				legend: {
					top: '5%',
					icon: 'circle',
					orient: 'horizontal',
					data: ['一年以上', '一年以内', '六个月内', '三个月内', '一个月内'],
					align: 'left',
					textStyle: {
						color: '#fff',
					},
					itemGap: 10,
				},
				tooltip: {
					show: false,
				},
				toolbox: {
					show: false,
				},
				series: seriesOption,
			};
			const chartDom = this.$refs.chart;
			this.commandstats = echarts.init(chartDom, 'macarons');
			this.commandstats.setOption(option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
